<template>
	<view>
		<view class="" style="height: var(--status-bar-height);
		  width: 100%;">
		</view>
		<!-- 头部 -->
		<view class="background">
			<view class="">
				<view class="background_icon">
					<view @click="tomessage">
						<image src="../../static/mine/message.png" mode=""></image>
					</view>
					<view @click="show = true">
						<image src="../../static/mine/getout.png" mode=""></image>
						<u-modal :show="show" :content='content' @cancel="cancel" @confirm="confirm" showConfirmButton
							showCancelButton style="text-align: center;"></u-modal>
					</view>

				</view>
				<!-- 个人信息 -->
				<view class="Personalinformation">
					<view class="avatar">
						<u-avatar :src="info.avatar" shape="circle" size="70"></u-avatar>
					</view>
					<view class="avatar_text">
						<text>{{info.username}}</text>
						<text>{{info.mobile}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 回访数据 -->
		
        <!-- <view class="data" v-if="group_id==1">
			<view class="datatext"  @click="jumpGos(1)">
				<view class="datatext_number" >{{yes}}</view>
				<view class="datatext_message">今日合格</view>
			</view>
			<view class="datatext"  @click="jumpGos(2)">
				<view class="datatext_number">{{no}}</view>
				<view class="datatext_message">今日不合格</view>
			</view>
		</view> -->
		<view class="data" v-if="group_id==2">
			<view class="datatext" @click="jumpGos(1)">
				<view class="datatext_number" >{{yess}}</view>
				<view class="datatext_message" >今日审核</view>
			</view>
			<view class="datatext" @click="jumpGos(2)">
				<view class="datatext_number">{{nos}}</view>
				<view class="datatext_message">本月审核</view>
			</view>
		</view>
		<view class="data" v-else-if="group_id==3">
			<view class="datatext" @click="jumpGo(1)">
				<view class="datatext_number">{{yess}}</view>
				<view class="datatext_message">今日回访</view>
			</view>
			<view class="datatext">
				<view class="datatext_number" @click="jumpGo(2)">{{nos}}</view>
				<view class="datatext_message">本月回访</view>
			</view>
		</view>
		<!-- 审核记录 -->
		<!-- <view class="Returnvisitrecord" v-if="group_id==1">
			<view class="Returnvisitrecord_left">
				审核记录
			</view>
			<view class="Returnvisitrecord_right" @click="go(1)">
				<view>查看更多</view>
				<view>
					<u-icon name="arrow-right" color="#CCCCCC" size="28"></u-icon>
				</view>
			</view>
		</view> -->
		<!-- 回访记录 -->
		<view class="Returnvisitrecord" v-if="group_id==2">
			<view class="Returnvisitrecord_left">
				被走访人
			</view>
			<!-- <view class="Returnvisitrecord_right" @click="go(1)">
				<view>查看更多</view>
				<view>
					<u-icon name="arrow-right" color="#CCCCCC" size="28"></u-icon>
				</view>
			</view> -->
		</view>
		<!-- 回访记录 -->
		<view class="" v-else-if="group_id==3">
			<view class="tab">
				<u-sticky bgColor="#fff">
					<u-tabs :list="list1" lineWidth="70" lineColor="#0C68FD"  @click="changeTab" :activeStyle="{
				    color: '#0C68FD',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				    color: '#606266',
				    transform: 'scale(1)'
				}" itemStyle="padding-left: 45px; padding-right: 35px; height: 34px;"></u-tabs>
				</u-sticky>
			</view>
			<!-- <view class="Returnvisitrecord_right" @click="Returnvisitrecord">
				<view>查看更多</view>
				<view>
					<u-icon name="arrow-right" color="#CCCCCC" size="28"></u-icon>
				</view>
			</view> -->
		</view>
		<!--列表 -->
		<!-- <view class="list" v-if="group_id==1">
			<view class="" v-for="(item,index) in list"  @click="Telephone_interview_details(item.id)">
			
				<view class="indexbody" >
					<view class="indexbody_title">
						<view>走访人</view>
						<view v-if="item.check_status==0" style="color:#1991FF;font-size:28rpx">待审核</view>
						<view v-else-if="item.check_status==1" style="color:#60C17D;font-size:28rpx">合格</view>
						<view v-else-if="item.check_status==2" style="color:#D5603B;font-size:28rpx">不合格</view>
					</view>
					<view class="indexbody_content">
						<view class="">
							<text>{{item.name}}</text>
							<text v-if="item.sex==1">男</text>
							<text v-else-if="item.sex==0">女</text>
							<text>{{item.age}}岁</text>
							<text>{{item.idcard}}</text>
						</view>
					</view>
					
					<view class="indexbody_bottom">
						<view class="indexbody_date">
							<text  v-if="item.type==0">
								暂无
							</text>
							<text class="tel"  v-else-if="item.type==1">
								电访
							</text>
							<text class="face"  v-else-if="item.type==2">
								面访
							</text>
						</view>
						<view class="indexbody_time" style="padding-bottom:44rpx;">
							<text>回访时间: {{item.createtime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="list" v-if="group_id==2">
			<view class="" v-for="(item,index) in list"  @click="Telephone_interview_details(item.id)">
			
				<view class="indexbody" >
					<view class="indexbody_title">
						<view>走访人</view>
						<view v-if="item.check_status==0" style="color:#1991FF;font-size:28rpx">待审核</view>
						<view v-else-if="item.check_status==1" style="color:#60C17D;font-size:28rpx">合格</view>
						<view v-else-if="item.check_status==2" style="color:#D5603B;font-size:28rpx">不合格</view>
					</view>
					<view class="indexbody_content">
						<view class="">
							<text>{{item.name}}</text>
							<text v-if="item.sex==1">男</text>
							<text v-else-if="item.sex==0">女</text>
							<text>{{item.age}}岁</text>
							<text>{{item.idcard}}</text>
						</view>
					</view>
					
					<view class="indexbody_bottom">
						<view class="indexbody_date">
							<text  v-if="item.type==0">
								暂无
							</text>
							<text class="tel"  v-else-if="item.type==1">
								电访
							</text>
							<text class="face"  v-else-if="item.type==2">
								面访
							</text>
						</view>
						<view class="indexbody_time" style="padding-bottom:44rpx;">
							<text>回访时间: {{item.recentlytime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list" v-else-if="group_id==3">
			<view class="list_content" v-for="item in list" @click="jump(item.villager_id)">
				<view class="list_content_left">
					<view class="list_content_left_top">
						{{item.name}}
					</view>
					<view class="list_content_left_bo">
						{{item.createtime}}
					</view>
				</view>
				
				<view class="list_content_right" v-if="item.type==0">
					<view class="status">
						暂无
					</view>
					<view class="edit" @click.stop="edit(item.id,item.villager_id)">
						编辑
					</view>
				</view>
				<view class="list_content_right" v-else-if="item.type==1">
					<view class="status">
						电访
					</view>
					<view class="edit" @click.stop="edit(item.id,item.villager_id)">
						编辑
					</view>
					
				</view>
				<view class="list_content_right" v-else-if="item.type==2">
					<view class="status">
						面访
					</view>
					<view class="edit" @click.stop="edit(item.id,item.villager_id)">
						编辑
					</view>
				</view>
			</view>
		</view>
		<view class="loadingText">{{loadingText}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,

				content: `确定退出`,
				
				// 头像
				info:'',
				yes:'',
				no:'',
				yess:'',
				nos:'',
				group_id:1,
				list: [],
				page: 1,
				loadingText: '',
				list1: [{
					name: '全部',
					id:0
				}, {
					name: '电访',
					id:1,
					
				}, {
					name: '面访',
					id:2
				} ],
				type:0
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList();
		},
		onReachBottom() {
			this.loadingText = "--上拉显示更多--"
			this.getMoreList();
		},
		onLoad() {
			// this.getInfo();
			this.group_id = uni.getStorageSync("group_id");
				console.log(this.group_id)
				 // this.getInfoT();
			
		},
		
		onShow() {
			this.getInfo();
			 this.getInfoT();
			this.list = [];
			this.page = 1;
			this.getList(); 
		  			
			if (this.group_id == 1) {
				
				
				 uni.setNavigationBarTitle({
				            title:'回访记录'
				        });
						console.log(555)
				uni.setTabBarItem({
					index: 0,
					text: '首页',
					iconPath: '/static/index/home.png',
					selectedIconPath: '/static/index/homeselect.png',
				});
				uni.setTabBarItem({
					index: 1,
					text: '新增',
					iconPath: '/static/index/newadd.png',
					selectedIconPath: '/static/index/addselect.png',
					visible:false
				});
				uni.setTabBarItem({
					index: 2,
					text: '我的',
					iconPath: '/static/index/mine.png',
					selectedIconPath: '/static/index/mineselect.png',
				});
				
			}
			 if (this.group_id == 2) {
				 uni.setNavigationBarTitle({
				            title:'回访记录'
				        });
				uni.setTabBarItem({
					index: 0,
					text: '首页',
					iconPath: '/static/index/home.png',
					selectedIconPath: '/static/index/homeselect.png'
				});
				uni.setTabBarItem({
					index: 1,
					text: '新增',
					iconPath: '/static/index/newadd.png',
					selectedIconPath: '/static/index/addselect.png',
					visible:false
					
				});
				uni.setTabBarItem({
					index: 2,
					text: '我的',
					iconPath: '/static/index/mine.png',
					selectedIconPath: '/static/index/mineselect.png'
				});
					
			
					
				
			}
			 if(this.group_id == 3){
				
				uni.setNavigationBarTitle({
				           title:'走访记录'
				       });
				uni.setTabBarItem({
					index: 1,
					text: '首页',
					iconPath: '/static/index/home.png',
					selectedIconPath: '/static/index/homeselect.png'
				});
				uni.setTabBarItem({
					index: 1,
					text: '新增',
					iconPath: '/static/index/newadd.png',
					selectedIconPath: '/static/index/addselect.png'
				});
				uni.setTabBarItem({
					index: 2,
					text: '我的',
					iconPath: '/static/index/mine.png',
					selectedIconPath: '/static/index/mineselect.png'
				});
			}
		
		
		},
		methods: {
			changeTab(item){
				console.log(item)
				this.type = item.id;
				this.list = [];
				this.page = 1
				this.getList();
			},
			getInfoT(){
				console.log(6666)
				let obj = {};
				 obj.page=this.page;
				this.$api.post('/api/user/my',obj).then((res) => {
					
					if (res.code == 1) {
						this.nos = res.data.no;
						this.yess = res.data.yes;
						
					} else {
						this.toastMsg(res.msg);
					}
				})
			},
			getMoreList() {
				this.loadingText = '-- 正在加载 --'
			let obj = {};
			let url = "";
			 obj.page=this.page;
			 if(this.group_id == 3){
				 obj.type = this.type; 
				
				url='/api/user/my';
			 }else{
				  url='/api/villagers/villagerList';
			 }
			 
			 
			this.$api.post(url,obj).then((res) => {
					if (res.code == 1) {
						// this.info = res.data;
						if (res.data.list.length == 0 || res.data.list == null) {
							this.loadingText = '-- 暂无更多 --'
							return false;
						}
						var newlist = res.data.list;
						this.list = this.list.concat(newlist)
						this.page++
					} else {
						this.toastMsg(res.msg);
					}
				});
			},
			
			getList() {
				let obj = {};
				let url = "";
				 obj.page=this.page;
				 
				if(this.group_id == 3){
					 obj.type = this.type; 
					
					url='/api/user/my';
				 }else{
					  url='/api/villagers/villagerList';
				 }
				 
				 
				this.$api.post(url,obj).then((res) => {
					
					if (res.code == 1) {
						this.no = res.data.no;
						this.yes = res.data.yes;
						if (res.data.list.length == 0 || res.data.list == null) {
							this.loadingText = '-- 暂无更多 --'
							return false;
						}
						this.list = res.data.list;
						uni.stopPullDownRefresh()
						this.page++
						
					} else {
						this.toastMsg(res.msg);
					}
				})
			},
			jump(id){
				uni.navigateTo({
					url:'../index/visit-detail?id='+id
				})
			},
			jumpGo(type){
				uni.navigateTo({
					url:'./ReturnVisitRecord?type='+type
				});
				
			},
			jumpGos(type){
				uni.navigateTo({
					url:'./examine?type='+type
				});
			},
			Telephone_interview_details(id){
				
				uni.navigateTo({
					url: '../mayor/QualiDetails?villager_id='+id
				})
			},	
			go(type){
				if(type==1){
				 uni.navigateTo({
				 	url: './examine',
				 });
				}
			},
			// 退出系统
			confirm() {

				uni.removeStorageSync('token');
				 uni.removeStorageSync('group_id')
				  uni.removeStorageSync('flag')
				uni.reLaunch({
					url: '/pages/login/login'
				});
				console.log(2)
				this.show = false;
			},
			cancel() {
				this.show = false;
			},
			tomessage() {
				uni.navigateTo({
					url: '../information/information'
				})
			},
			Returnvisitrecord() {
				uni.navigateTo({
					url: 'ReturnVisitRecord'
				})
			},

			getInfo() {
				this.$api.post('/api/user/index').then((res) => {

					if (res.code == 1) {
                      this.info = res.data;
					} else {
						this.toastMsg(res.msg);
					}
				})

			},
			edit(id,villager_id){
				uni.navigateTo({
					url:'../index/visit-edit?id='+id+'&villager_id='+villager_id
				})
			}
		},
	}
</script>

<style>
	page {
		background-color: #EFF1F5;
	}
	/deep/.u-tabs__wrapper__nav__line{
		left: 44rpx;
	}
</style>

<style lang="scss" scoped>
	.loadingText {
		padding: 20rpx 0 40rpx 0;
		text-align: center;
		color: #310D05;
		font-size: 28rpx;
	}
	.tab{
		display: flex;
		justify-content: center;
		background-color: #fff;
		margin: 0 30rpx;
	}
	.indexbody {
		margin: 30rpx 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	
		.indexbody_title {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
	
			img {
				width: 40rpx;
				height: 40rpx;
			}
	
			:first-child {
				font-weight: bold;
			}
	
			:last-child {
				color: #CCCCCC;
				font-size: 24rpx;
			}
		}
	
		.indexbody_content {
	
			background-color: #F8F8F8;
			margin: 10rpx 40rpx;
			padding: 10rpx;
			font-size: 30rpx;
	
			text {
				padding: 0 16rpx;
				border-right: 2rpx solid #333333;
			}
	
			:last-child {
				border-right: none;
			}
		}
	
		.indexbody_address {
			display: flex;
			margin: 20rpx 20rpx;
	
			img {
				width: 40rpx;
				height: 40rpx;
			}
		}
	
		.indexbody_time {
			margin: 16rpx 20rpx;
			font-size:24rpx ;
			color:#AAAAAA
		}
	
		.indexbody_bottom {
			display: flex;
			justify-content: flex-start;
		    align-items: center;
			margin: 40rpx 0 40rpx 40rpx;
	
			.indexbody_date {
	
				padding-bottom: 40rpx;
	
				.tel {
					padding: 6rpx;
					font-size: 28rpx;
					background-color: #EFF2FA;
					color: #5F7FD0;
	
				}
				.face{
					padding: 6rpx;
					font-size: 28rpx;
					background-color: #FAF6EF;
					color: #D0AA5F;
				}
			}
	
			.Pass {
				img {
					width: 280rpx;
					height: 244rpx;
				}
	
			}
		}
	
	}
	.background {
		background-image: url('../../static/mine/bg.png');
		background-size: 100% 100%;
		height:260rpx;
		padding-top: 40rpx;
	}

	.background_icon {
		display: flex;
		justify-content: flex-end;
		margin-right: 20rpx;
		margin-top: 20rpx;

		image {
			width:48rpx;
			height: 48rpx;
			margin: 20rpx 20rpx;
		}
	}

	// 个人信息
	.Personalinformation {
		color: #fff;
		display: flex;
		margin-left: 30rpx;
		padding-bottom: 40rpx;
		margin-top: -80rpx;

		.avatar {
			margin-right: 20rpx;
			position: relative;
			top: 10rpx;
		}

		.avatar_text {
			display: flex;
			flex-direction: column;
			color: #CEE0FF;

			text:first-child {
				font-size: 64rpx;
				font-weight: 800;
				padding-bottom: 10rpx;
			}

			text:last-child {
				font-size: 26rpx;
			}
		}
	}

	.data {
		height: 180rpx;
		border-radius: 20rpx;
		margin: -40rpx 30rpx 30rpx 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.datatext {

			// display: flex;
			view:first-child {
				color: #333333;
				padding-left: 25rpx;
			}

			.datatext_number {
				font-weight: bold;
				margin-bottom: 12rpx;
			}

			.datatext_message {
				color: #999999;
				font-size: 24rpx;
			}
		}
	}

	// 回访记录
	.Returnvisitrecord {
		margin: 30rpx;
		display: flex;
		justify-content: space-between;

		.Returnvisitrecord_left {
			color: #333333;
			font-size: 32rpx;
		}

		.Returnvisitrecord_right {
			display: flex;
			color: #BBBBBB;
			font-size: 24rpx;
		}
	}

	// 列表
	.list {

		.list_content {
			background-color: #fff;
			padding:30rpx;
			margin: 24rpx;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.list_content_left {
			.list_content_left_top {
				color: #333333;
				font-weight: 800;
				padding-bottom: 15rpx;
			}

			.list_content_left_bo {
				color: #AAAAAA;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}

		.list_content_right {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			justify-content: space-between;
			.status{
				color: #999999;
				font-size: 28rpx;
				padding-bottom: 15rpx;
			}
			.edit{
				color: #333;
				font-size: 28rpx;
			}
		}
	}
</style>
